<template>
    <div class="content">
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <!-- 首页user信息 -->
                        <el-card shadow='hover'>
                            <div class="userCard">
                                <el-avatar :size="150" :src=imgUrl></el-avatar>
                                <div class="userInfo">
                                    <p class="important-font">{{username}}</p>
                                </div>
                            </div>
                        </el-card>
                        <!-- 首页表格 -->
                        <el-card shadow='hover' class="tableInfo">
                            <div slot="header" style="height:100px;">
                                <span class="important-font">版本信息</span>
                            </div>
                            <div>
                                <el-table :data="tableData" stripe border height="450px" style="width: 100%;" :header-row-style="() => { return 'line-height:20px';}">
                                    <el-table-column prop="date" label="日期" width="120">
                                    </el-table-column>
                                    <el-table-column prop="name" label="版本" width="80">
                                    </el-table-column>
                                    <el-table-column prop="address" label="版本特性">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="8">
                    <el-card shadow='hover' :body-style="{ display: 'flex',padding: 0 }" class="OrderCard">
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow='hover' :body-style="{ display: 'flex',padding: 0 }" class="OrderCard">
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import constantJs from '../assets/js/constant'
    export default {
        data() {
            return {
                username: '',
                imgUrl: require('../assets/img/avator.jpg'),
                value: new Date(),
                tableData: [{
                    date: '2024-04-10',
                    name: 'v1.0.0',
                    address: '在线模板搭建'
                }, {
                    date: '2024-04-10',
                    name: 'v1.0.0',
                    address: '在线SQL搭建'
                }, {
                    date: '2024-04-10',
                    name: 'v1.0.0',
                    address: '数据源搭建'
                }, {
                    date: '2024-04-10',
                    name: 'v1.0.0',
                    address: '命名空间搭建'
                }]
            }
        },
        created() {
            this.username = localStorage.getItem(constantJs.authUserHeader) ? localStorage.getItem(constantJs.authUserHeader) : 'wtf'
        },
        methods: {

        }
    }

</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-card__body {
    padding: 10px;
}
.userCard {
    height: 180px;
    display: flex;
    border-bottom: 2px solid #dcdfe6;
    border-radius: 2px;
}
.userInfo {
    width: auto;
    padding: 6% 0 0 6%;
}
.important-font {
    font-weight: 900;
    font-size: 25px;
    line-height: 10%;
}
.secondary-font {
    color: #909399;
}
.login-info {
    height: 40px;
    text-align: left;
    color: #909399;
}
.tableInfo {
    margin: 20px 0 0 0;
}

.el-card {
    border: none;
}
h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
}
ul {
    list-style-type: none;
}

h4 {
    margin-top: 0px;
}
ul {
    padding: 0;
    margin: 0;
}
</style>
